<template>
	<div class="video">
		<div class="videoLists">
			<block v-for="(item, index) in videoLists" :key="index">
				<div class="video-item" @click="toMv(item.id)">
					<div class="video">
						<image :src="pictureSize(item.cover, 300, 200)" mode=""></image>
						<div class="video-info">
							<!-- 播放量 -->
							<div class="amountPlay">
								<image src="../../static/images/icons/play_icon.png"></image>
								<div class="videoNum">{{ formatCount(item.playCount) }}</div>
							</div>
							<!-- 播放时间-->
							<div class="videoTime">{{ $u.timeFormat(item.mv.videos[0].duration, 'MM:ss') }}</div>
						</div>
					</div>
					<div class="video-title">{{ item.name }} - {{ item.artistName }}</div>
				</div>
			</block>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import { formatCount } from '../../utils/formatCount.js';
import { pictureSize } from '@/utils/pictureSize.js';
export default {
	data() {
		return {
			offset: 0
		};
	},
	computed: {
		...mapGetters(['videoLists', 'hasMore'])
	},
	onLoad() {
		this.$store.dispatch('video/fetchVideoData', this.offset);
	},
	methods: {
		formatCount,
		pictureSize,
		// 触底事件
		onReachBottom() {
			if (!this.hasMore) {
				this.$u.toast('没有更多数据~');
				return;
			}
			this.offset = this.videoLists.length;
			this.$store.dispatch('video/fetchVideoData', this.offset);
		},
		// 下拉事件
		onPullDownRefresh() {
			this.$store.dispatch('video/fetchVideoData', 0);
		},
		// 跳转MV详情页
		toMv(id) {
			uni.navigateTo({
				url: `/pages/video-detail/index?id=${id}`
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.videoLists {
	width: 100vw;
	padding: 20upx 0;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	.video-item {
		width: 340upx;
		display: flex;
		flex-direction: column;
		padding-bottom: 30upx;
		.video {
			position: relative;
			image {
				width: 100%;
				height: 210upx;
				border-radius: 10upx;
			}
			.video-info {
				width: 90%;
				display: flex;
				justify-content: space-between;
				position: absolute;
				bottom: 18upx;
				left: 10upx;
				.amountPlay {
					display: flex;
					align-items: center;
					image {
						width: 32upx;
						height: 24upx;
						border-radius: 0;
					}
					.videoNum {
						color: #fff;
						font-size: 24upx;
						padding-left: 12upx;
					}
				}
				.videoTime {
					color: #fff;
					font-size: 24upx;
				}
			}
		}
		.video-title {
			font-size: 26upx;
			width: 100%;
			display: -webkit-box;
			overflow: hidden;
			text-overflow: ellipsis;
			word-wrap: break-word;
			white-space: normal !important;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
	}
}
</style>
